<template>
  <div class="el-page el-main">
    <el-card class="personal-card" :body-style="{ padding: '20px' }">
      <div class="personal-info">
        <el-row>
          <el-col :span="24">
            <h2>个人信息</h2>
          </el-col>
          <el-col :span="24" class="profile-image">
            <img src="../../../assets/avatar/cat.png" alt="Profile Picture" class="profile-img" />
          </el-col>
          <el-col :span="24">
            <el-form>
              <el-form-item label="姓名">
                <span>{{ user.oguName }}</span>
              </el-form-item>
              <el-form-item label="电话">
                <span>{{ user.mobile }}</span>
              </el-form-item>
              <el-form-item label="部门">
                <span>{{ user.fullPathName }}</span>
              </el-form-item>
              <el-form-item label="邮箱">
                <span>{{ user.email }}</span>
              </el-form-item>
              <el-form-item label="功能">
                <span v-for="item in user.roles">{{ item.roleName }} - </span>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getInfo } from '@/utils/auth'
export default {
  data() {
    return {
      flag: false,
      user: JSON.parse(getInfo())
    }
  },
  methods: {
    change() {
      // this.flag = !this.flag
      if (this.flag) {
        this.$nextTick(() => {
          this.Animation1()
        })

      } else {
        this.$nextTick(() => {
          this.Animation2()
        })
      }

    },
    Animation1() {
      // 获取画布和上下文
      const canvas = document.getElementById('canvas1');
      const ctx = canvas.getContext('2d');

      // 设置画布宽高
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 粒子对象
      class Particle {
        constructor() {
          this.x = Math.random() * canvas.width;
          this.y = Math.random() * canvas.height;
          this.vx = Math.random() * 2 - 1; // x 轴速度
          this.vy = Math.random() * 2 - 1; // y 轴速度
          this.size = Math.random() * 3 + 1; // 粒子大小
          this.color = '#fff'; // 粒子颜色
        }

        // 更新粒子位置
        update() {
          this.x += this.vx;
          this.y += this.vy;

          // 碰撞检测边界
          if (this.x < 0 || this.x > canvas.width) {
            this.vx = -this.vx;
          }
          if (this.y < 0 || this.y > canvas.height) {
            this.vy = -this.vy;
          }
        }

        // 绘制粒子
        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = this.color;
          ctx.fill();
        }
      }

      // 创建粒子数组
      const particles = [];
      for (let i = 0; i < 500; i++) {
        particles.push(new Particle());
      }

      // 鼠标移动事件监听
      canvas.addEventListener('mousemove', function (event) {
        particles.forEach(particle => {
          const dx = particle.x - event.clientX;
          const dy = particle.y - event.clientY;
          const distance = Math.sqrt(dx * dx + dy * dy);
          if (distance < 100) {
            particle.size = 10;
            particle.color = '#00a2e8';
          } else {
            particle.size = Math.random() * 3 + 1;
            particle.color = '#fff';
          }
        });
      });

      // 动画循环
      function animate() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        particles.forEach(particle => {
          particle.update();
          particle.draw();
        });

        requestAnimationFrame(animate);
      }

      // 启动动画
      animate();
    },
    Animation2() {
      const name = this.name
      // 获取画布和上下文
      const canvas = document.getElementById('canvas2');
      const ctx = canvas.getContext('2d');

      // 设置画布宽高
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 定义鼠标对象
      const mouse = {
        x: null,
        y: null,
        radius: 100
      };

      // 监听鼠标移动事件
      window.addEventListener('mousemove', function (event) {
        mouse.x = event.x - 250;
        mouse.y = event.y - 100;
      });

      // 创建粒子对象
      class Particle {
        constructor(x, y, color) {
          this.x = x;
          this.y = y;
          this.size = 3;
          this.baseSize = this.size;
          this.color = color;
          this.baseX = this.x;
          this.baseY = this.y;
          this.density = (Math.random() * 30) + 1;
        }

        // 绘制粒子
        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
          ctx.fillStyle = '#000'
          // ctx.fillStyle = this.color;
          ctx.fill();
        }

        // 更新粒子位置
        update() {
          let dx = mouse.x - this.x;
          let dy = mouse.y - this.y;
          let distance = Math.sqrt(dx * dx + dy * dy);
          let forceDirectionX = dx / distance;
          let forceDirectionY = dy / distance;
          let maxDistance = mouse.radius;
          let force = (maxDistance - distance) / maxDistance;
          let directionX = forceDirectionX * force * this.density;
          let directionY = forceDirectionY * force * this.density;
          if (distance < mouse.radius) {
            this.x -= directionX;
            this.y -= directionY;
          } else {
            if (this.x !== this.baseX) {
              let dx = this.x - this.baseX;
              this.x -= dx / 10;
            }
            if (this.y !== this.baseY) {
              let dy = this.y - this.baseY;
              this.y -= dy / 10;
            }
          }
        }
      }

      // 创建粒子数组
      let particles = [];
      function init() {
        particles = [];
        // const letters = "杨红凯";
        const letters = name;
        const fontSize = 300;
        ctx.font = `${fontSize}px Arial`;
        ctx.textAlign = 'center';
        ctx.fillText(letters, canvas.width / 2, canvas.height / 2 + fontSize / 3);

        // 获取文字像素数据
        const data = ctx.getImageData(222, 22, canvas.width, canvas.height).data;

        // 循环遍历像素数据，创建粒子
        for (let y = 0; y < canvas.height; y += 4) {
          for (let x = 0; x < canvas.width; x += 4) {
            if (data[(y * canvas.width + x) * 4 + 3] > 128) {
              let color = `rgb(${data[(y * canvas.width + x) * 4]}, ${data[(y * canvas.width + x) * 4 + 1]}, ${data[(y * canvas.width + x) * 4 + 2]})`;
              let particle = new Particle(x, y, color);
              particles.push(particle);
            }
          }
        }
      }

      // 动画循环
      function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        particles.forEach(particle => {
          particle.update();
          particle.draw();
        });
      }

      // 初始化并开始动画
      init();
      animate();
    },
    Animation3() {
      // 获取画布和上下文
      const canvas = document.getElementById('canvas2');
      const ctx = canvas.getContext('2d');

      // 设置画布宽高
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;

      // 定义粒子对象
      class Particle {
        constructor() {
          this.x = Math.random() * canvas.width;
          this.y = Math.random() * canvas.height;
          this.speed = {
            x: -0.5 + Math.random(),
            y: -0.5 + Math.random()
          };
          this.radius = Math.random() * 2;
        }

        // 绘制粒子
        draw() {
          ctx.beginPath();
          ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
          ctx.fillStyle = 'rgba(70, 130, 180, 0.8)'; // 蓝色
          ctx.fill();
        }

        // 更新粒子位置
        update() {
          this.x += this.speed.x;
          this.y += this.speed.y;
          if (this.x < 0 || this.x > canvas.width) {
            this.speed.x = -this.speed.x;
          }
          if (this.y < 0 || this.y > canvas.height) {
            this.speed.y = -this.speed.y;
          }
        }
      }

      // 创建粒子数组
      let particles = [];
      const particleCount = 100;

      // 初始化粒子
      function init() {
        for (let i = 0; i < particleCount; i++) {
          particles.push(new Particle());
        }
      }

      // 动画循环
      function animate() {
        requestAnimationFrame(animate);
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        particles.forEach(particle => {
          particle.update();
          particle.draw();
        });
      }

      // 初始化并开始动画
      init();
      animate();
    },
  },
  mounted() {
    // this.change()
  }
}
</script>

<style lang='scss' scoped>
.canvas1 {
  border-radius: 50%;
  width: 100%;
  height: 100%;
  display: block;
  background-color: #000;
}

.canvas2 {
  display: block;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

.el-main {
  overflow: hidden;
}

.personal-card {
  max-width: 400px;
  // margin: 0 auto;
}

.profile-image {
  text-align: center;
}

.profile-img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e4e4e4;
}

h2 {
  text-align: center;
  color: #303133;
}

.el-form-item {
  margin-bottom: 20px;
}
</style>
